<template>
	<view class="content" :style="{'padding-top':top+'px','min-height':windowheight+'px'}">
		<Nav title1="拍摄" bgColor="#d86784" :backIcon="false" style="color: #ffffff;z-index: 1;"></Nav>
		<view style="width: 100vw;height: 400rpx;">
			<swiper class="swiper" indicator-dots="true" autoplay="true" circular="true">
				<swiper-item v-for="item in locationCover" :key="item">
					<image mode="aspectFill" :src="item.shootAddressPhoto"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="shootingSeries">
			<view class="shootingBranch" v-for="(item,index) in shootingType" key="index" @click="spotBeat(item.path)">
				<image :src="item.image" :style="{'background-color':item.color}"></image>
				<view class="shootingtext">{{item.text}}</view>
			</view>
		</view>
		<view class="orderTaking" @click="details">
			<view class="orderTakingtop">千岛湖三日游跟拍</view>
			<view class="orderTakingtime">
				<uni-dateformat :date="new Date()" format='MM月dd日'></uni-dateformat>
				<text>周{{Weekconversion(new Date(data).getDay())}}</text>
				<uni-dateformat :date="data" format='MM月dd日' style="margin-left: 20rpx;"></uni-dateformat>
				<text>周{{Weekconversion(new Date(data).getDay())}}</text>
			</view>
			<view class="orderTakingcenter">
				<uni-tag text="跟拍" circle="true"/>
			    <uni-tag text="浙江省-杭州市" circle="true"/>
			</view>
			<view class="orderTakingbottom">
				<text>1000元</text>
				<button size="mini">详情</button>
			</view>
		</view>
		<view class="orderTaking" @click="details">
			<view class="orderTakingtop">千岛湖三日游跟拍</view>
			<view class="orderTakingtime">
				<uni-dateformat :date="new Date()" format='MM月dd日'></uni-dateformat>
				<text>周{{Weekconversion(new Date(data).getDay())}}</text>
				<uni-dateformat :date="data" format='MM月dd日' style="margin-left: 20rpx;"></uni-dateformat>
				<text>周{{Weekconversion(new Date(data).getDay())}}</text>
			</view>
			<view class="orderTakingcenter">
				<uni-tag text="跟拍" circle="true"/>
			    <uni-tag text="浙江省-杭州市" circle="true"/>
			</view>
			<view class="orderTakingbottom">
				<text>1000元</text>
				<button size="mini">详情</button>
			</view>
		</view>
		<Tabbar :page="page"></Tabbar>
	</view>
</template>
<script setup>
	import { ref,onMounted } from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const baseUrl = getApp().globalData.baseUrl
	const title=ref('Hello')
	const page=ref('/pages/shoot/shoot')
	const platform=ref()
	const statusBar=ref()
	const customBar=ref()
	const top=ref()
	const paddingTop=ref()
	const windowheight=ref()
	const locationCover=ref([])
	const shootingType=ref([
		{
			text:"点拍",
			image:"../../static/dianpai.png",
			path:"/pages/spotBeat/spotBeat",
			color:"#da5353"
		},
		{
			text:"主题拍",
			image:"../../static/zhutipai.png",
			path:"/pages/subjectBeat/subjectBeat",
			color:"#57d1b8"
		},
		{
			text:"跟拍",
			image:"../../static/genpai.png",
			path:"/pages/orderreceptionhall/orderreceptionhall",
			color:"#5da8e7"
		},
		{
			text:"商拍",
			image:"../../static/shangpai.png",
			path:"/pages/orderreceptionhall/orderreceptionhall",
			color:"#be4377"
		}
	])
	const data = ref(new Date().getTime())
	const Weekconversion=(data)=>{
		switch (data) {
		  case 0:
		   return '天';
		  case 1:
		   return '一';
		  case 2:
		   return '二';
		  case 3:
		   return '三';
		  case 4:
		    return '四';
		  case 5:
		    return '五';
		  case 6:
		    return '六';
		}
	}
	const details=()=>{
		uni.navigateTo({
			url:"/pages/requirementdetails/requirementdetails"
		})
	}
	const getColumnHeight=()=>{
		uni.getSystemInfo({
			success(res) {
				console.log(res)
				platform.value = res.platform
				// #ifdef MP-WEIXIN
				windowheight.value=res.screenHeight
				statusBar.value = res.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar.value = custom.bottom + custom.top - res.statusBarHeight
				// #endif
				// #ifdef APP-PLUS
				statusBar.value = res.statusBarHeight
				customBar.value = res.statusBarHeight + 45
				// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
				if (res.platform == "android") {
					statusBar.value += 3
					customBar.value += 3
				}
				// #endif
			}
		})
		top.value = statusBar.value * 2 + (customBar.value - statusBar.value) * 2
		top.value=top.value/2
		windowheight.value=windowheight.value*2-top.value*2-200
		windowheight.value=windowheight.value/2
		console.log(statusBar.value, customBar.value, top.value,windowheight.value)
	}
	onMounted(()=>{
		getColumnHeight()
	})
	const spotBeat=(path)=>{
		console.log(path)
		uni.navigateTo({
			url:path
		})
	}
	onShow(()=>{
		const now = new Date().getTime()
		if (!uni.getStorageSync('token') || now > uni.getStorageSync('expireTime')) {
			uni.reLaunch({
				url: "/pages/login/login"
			})
		}else{
			uni.request({
				url: baseUrl + "/shoot/adress/list",
				method: "POST",
				dataType: "json",
				header: {
					'content-type': 'application/json',
					'Access-Control-Allow-Origin': "*",
				},
				data: {
					shootHot: 1,
				},
				success: function(res) {
					if (res.data.code === 200) {
						locationCover.value = res.data.value
					}
					console.log(res.data.value)
				}
			})
		}
	})
</script>
<style lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 100px;
		background-image: linear-gradient(to bottom,#d95e7d,#ffffff);
	}
	.swiper{
		width: 100vw;
		height: 400rpx;
		image{
			width: 100vw;
			height: 400rpx;
		}
	}
	.shootingSeries{
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 5vw;
		padding-right: 5vw;
		width: 90vw;
		height: 180rpx;
		display: flex;
		.shootingBranch{
			width: 25%;
			height: 180rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			image{
				box-sizing: border-box;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				padding: 18rpx;
			}
			.shootingtext{
				margin-top: 20rpx;
			}
		}
	}
	.orderTaking{
		margin-top: 20rpx;
		width: 90vw;
		border-radius: 20rpx;
		background-image: linear-gradient(to left, #fbb0ba, #fae1e5);
		.orderTakingtop{
			margin-left: 30rpx;
			font-size: 30rpx;
			margin-top: 20rpx;
		}
		.orderTakingtime{
			margin-top: 10rpx;
			margin-left: 30rpx;
			font-size: 24rpx;
		}
		.orderTakingcenter{
			margin-top: 10rpx;
		}
		.uni-tag{
			padding: 5rpx 40rpx !important;
			color: #000000 !important;
			background-color: #ededed !important;
			border: #ededed solid 1rpx !important;
			margin-left: 20rpx;
		}
		.orderTakingbottom{
			margin-bottom: 20rpx;
			height:60rpx ;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			margin-top: 50rpx;
			text{
				margin-left: 30rpx;
				color: #a5586c;
			}
			button{
				border: #a5586c solid 2rpx;
				background-color: transparent;
				position: absolute;
				right: 30rpx;
				padding-right: 70rpx;
				padding-left: 70rpx;
			}
		}
	}

</style>